<template>
	<view class="">
		<view class="friend">
			<!-- #ifdef H5 -->
				<image class="can_pic" style="width: 345px;height: 564px;" :src="base" mode=""></image>
				<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
				<view class="" >
					<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/banner.png" mode="widthFix"></image>
					<view class="friend_contant">
						<view class="friend_contant_banner">
							<image :src="activeInfo.cover" mode="aspectFill"></image>
							<view class="friend_contant_banner_bot">
								<view class="pic"><image :src="activeInfo.cover" mode="aspectFill"></image></view>
								<view class="runname">
									{{ activeInfo.club_name }}
									<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/group_logo.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="active_info">
							<view class="active_title">{{ activeInfo.name }}</view>
							<view class="active_date">比赛时间：{{ activeInfo.start_time }}至{{ activeInfo.end_time }}</view>
							<view class="active_date">比赛地点：{{ activeInfo.address }}</view>
						</view>
						<view class="ewm">
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/discen.png" mode="widthFix"></image>
							<view class="look">长按识别小程序二维码</view>
						</view>
					</view>
				</view>
			<!-- #endif -->
			<view class="save" @tap="down">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/down.png"></image>
				<view class="save_tit">长按保存图片</view>
			</view>
			
			<view style="width:0px;height:0px;overflow:hidden;"><canvas canvas-id="myCanvas" style="width: 345px;height: 564px;"></canvas></view>
		</view>
		<navigation></navigation>
	</view>
</template>

<script>
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: {
		navigation
	},
	data() {
		return {
			active_id: '',
			activeInfo: {},
			base: '',
			img_src: '',
			date: '',
			area: '',
			header_src: 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/share_header.png',
			coverBanner: 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/coverBanner.png',
			cover_banner: {
				banner: 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/banner.png',
				run: 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/group_logo.png'
			},
			ewm_p: 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/12323.png',
			version: '',
			versionflag: false,
			bannerWchat: '',
			headWchat: '',
			ewmWchat: '../../static/othertwo/12323.png',
			vipWchat: '../../static/othertwo/group_logo.png'
		};
	},
	onLoad(options) {
		this.active_id = options.activeid;
	},
	mounted() {
		var that = this;
		that.version = uni.getSystemInfoSync().version;
		uni.getImageInfo({
			src: that.coverBanner,
			success: res=> {
				that.bannerWchat = res.path
			}
		})
		uni.getImageInfo({
			src: that.header_src,
			success: res=> {
				//  // console.log (res.path);
				that.headWchat = res.path
			}
		})
		// 获取比赛信息
		setTimeout(function() {
			that.getactiveinfo();
		}, 1000);
	},
	methods: {
		// 下载图片
		down() {
			var version = uni.getSystemInfoSync().version;
			if (version) {
				this.saveVersion();
			} else {
				uni.showModal({
					title: '提示',
					content: '长按图片保存',
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		// 小程序
		saveVersion() {
			uni.showLoading({
				title: '生成图片中'
			});
			const ctx = uni.createCanvasContext('myCanvas'); //绑定画布
			// 设置背景
			// ctx.drawImage(this.coverBanner, 0, 0, 345, 564);
			ctx.drawImage(this.bannerWchat, 0, 0, 345, 564);
			// ctx.drawImage(this.header_src, 133, 154, 76, 76);
			
			uni.getImageInfo({
				src: this.activeInfo.cover,
				success: res=> {
					ctx.drawImage(res.path,20, 22, 305, 170);
					ctx.draw(true); 
				}
			})
			// 设置头像
			ctx.drawImage(this.activeInfo.cover, 140, 160, 62, 62);
			uni.getImageInfo({
				src: this.activeInfo.cover,
				success: res=> {
					ctx.drawImage(res.path,140, 160, 62, 62);
					ctx.draw(true); 
				}
			})
			uni.getImageInfo({
				src: this.header_src,
				success: res=> {
					ctx.drawImage(res.path,133, 154, 76, 76);
					ctx.draw(true); 
				}
			})
			// 设置头像的边框
		
		
			// 设置跑团名   还需要设置居中
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(14);
			ctx.setTextAlign('center');
			 // console.log (ctx);
			var metrics = ctx.measureText(this.activeInfo.club_name);
			//  // console.log (metrics.width)
			ctx.fillText(this.activeInfo.club_name, 166, 250);
			// 设置跑团logo
			ctx.drawImage(this.vipWchat, (metrics.width + 340) / 2, 238, 12, 14);
			// 设置标题
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(14);
			ctx.setTextAlign('left');
			ctx.fillText(this.activeInfo.name, 38, 280);
			// 设置比赛时间  判断比赛时间的长度
			var time_z = this.date.split('');
			var time_temp = '';
			var time_temp_t = '';
			var timeWidth = 0;
			var lastindex_time = 0; // 每次开始截取的字符串索引
			for (var a = 0; a < time_z.length; a++) {
				timeWidth += ctx.measureText(time_z[a]).width;
				if (timeWidth < 285) {
					time_temp = this.date.substring(0, a);
					lastindex_time = a;
				} else {
					time_temp_t = this.date.substring(lastindex_time, time_z.length);
					//  // console.log (time_temp_t)
				}
			}
			// 设置标题  判断标题的长
			var area_z = this.area.split('');
			var temp = '';
			var temp_t = '';
			var row = [];
			var areaWidth = 0;
			var lastindex = 0; // 每次开始截取的字符串索引
			for (var a = 0; a < area_z.length; a++) {
				areaWidth += ctx.measureText(area_z[a]).width;
				if (areaWidth < 285) {
					temp = this.area.substring(0, a + 1);
					lastindex = a;
				} else {
					temp_t = this.area.substring(lastindex, area_z.length);
				}
			}
			// 设置时间
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(12);
			ctx.fillText(time_temp, 38, 298);
			if (time_temp_t) {
				ctx.fillText(time_temp_t, 38, 314);
				ctx.fillText(temp, 38, 330);
				ctx.fillText(temp_t, 38, 346);
			}
			ctx.drawImage(this.ewmWchat, 90, 380, 150, 120);
			// uni.getImageInfo({
			// 	src: this.ewm_p,
			// 	success: res=> {
			// 		ctx.drawImage(res.path,90, 380, 150, 120);
			// 		ctx.draw(true); 
			// 	}
			// })
			ctx.draw();
			setTimeout(() => {
				//不加延迟的话，base64有时候会赋予undefined
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					success: res => {
						 // console.log (res, 111);
						uni.hideLoading();
						// this.img_src = res.tempFilePath;
						// this.base = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								//  // console.log ('save success');
								this.toast('保存成功');
							}
						});
						//  // console.log (this.base)
					}
				});
				uni.hideLoading();
			}, 800);
		},
		save() {
			 // console.log (11);
			uni.showLoading({
				title: '生成图片中'
			});
			const ctx = uni.createCanvasContext('myCanvas'); //绑定画布
			// 设置背景
			// ctx.drawImage(this.cover_banner.banner,0,0,345,564)
			ctx.drawImage(this.coverBanner, 0, 0, 345, 564);
			// 设置头部海报
			ctx.drawImage(this.activeInfo.cover, 20, 22, 305, 170);
			// 设置头像的边框
			ctx.drawImage(this.header_src, 133, 154, 76, 76);
			// 设置头像
			ctx.drawImage(this.activeInfo.cover, 140, 160, 62, 62);
			// 设置跑团名   还需要设置居中
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(14);
			ctx.setTextAlign('center');
			const metrics = ctx.measureText(this.activeInfo.club_name);
			//  // console.log (metrics.width)
			ctx.fillText(this.activeInfo.club_name, 166, 250);
			// 设置跑团logo
			ctx.drawImage(this.cover_banner.run, (metrics.width + 340) / 2, 238, 12, 14);
			// 设置标题
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(14);
			ctx.setTextAlign('left');
			ctx.fillText(this.activeInfo.name, 38, 280);
			// 设置比赛时间  判断比赛时间的长度
			var time_z = this.date.split('');
			var time_temp = '';
			var time_temp_t = '';
			var timeWidth = 0;
			var lastindex_time = 0; // 每次开始截取的字符串索引
			for (var a = 0; a < time_z.length; a++) {
				timeWidth += ctx.measureText(time_z[a]).width;
				if (timeWidth < 285) {
					time_temp = this.date.substring(0, a);
					lastindex_time = a;
				} else {
					time_temp_t = this.date.substring(lastindex_time, time_z.length);
					//  // console.log (time_temp_t)
				}
			}
			 // console.log (time_temp);
			 // console.log (time_temp_t);

			// 设置标题  判断标题的长
			var area_z = this.area.split('');
			var temp = '';
			var temp_t = '';
			var row = [];
			var areaWidth = 0;
			var lastindex = 0; // 每次开始截取的字符串索引
			for (var a = 0; a < area_z.length; a++) {
				areaWidth += ctx.measureText(area_z[a]).width;
				if (areaWidth < 285) {
					temp = this.area.substring(0, a + 1);
					lastindex = a;
				} else {
					temp_t = this.area.substring(lastindex, area_z.length);
					//  // console.log (temp_t)
				}
			}
			// 设置时间
			ctx.setFillStyle('#333'); //设置内容2的文字样式
			ctx.setFontSize(12);
			ctx.fillText(time_temp, 38, 298);
			if (time_temp_t) {
				ctx.fillText(time_temp_t, 38, 314);
				// ctx.setFillStyle('#333')
				// ctx.setFontSize(12);
				ctx.fillText(temp, 38, 330);
				ctx.fillText(temp_t, 38, 346);
			}
			ctx.drawImage(this.ewm_p, 90, 380, 150, 120);
			ctx.draw();
			setTimeout(() => {
				//不加延迟的话，base64有时候会赋予undefined
				uni.canvasToTempFilePath({
					// x: 0,
					// y: 0,
					// width: 345,
					// height: 564,
					// destWidth: 345,
					// destHeight: 564,
					canvasId: 'myCanvas',
					success: res => {
						 // console.log (res, 111);
						uni.hideLoading();
						this.img_src = res.tempFilePath;
						this.base = res.tempFilePath;
						//  // console.log (this.base)
					}
				});
				uni.hideLoading();
			}, 800);
		},
		getactiveinfo() {
			var version = uni.getSystemInfoSync().version;
			this.ajax('active/activeBaseInfo', {
				data: {
					id: this.active_id
				},
				success: res => {
					 // console.log (res);
					this.activeInfo = res.msg;
					this.date = '比赛时间：' + res.msg.start_time + '至' + res.msg.end_time;
					this.area = '比赛地点：' + res.msg.address;
					 // console.log (this.area.length);
					if (!version) {
						this.versionflag = false;
						this.save();
					} else {
						this.versionflag = true;
					}
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="less" scoped>
@import url('../../static/less/pageA/competiondetail/friendbanner.less');
</style>
